<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item, index) in swiperData.swiperData"
        :key="index"
      >
        <img :src="item.imageUrl" />
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Swiper from "swiper/swiper-bundle.js";

// 父组件传来的值
const swiperData = defineProps(["swiperData"]);


  setTimeout(() => {
    new Swiper(".swiper-container", {
      // 自动初始化 swiper !
      observer:true,
      slidesPerView: 3,
      spaceBetween: -48,
      centeredSlides: true,
      loop: true,
      updateOnImagesReady: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }, 400);



</script>
<style lang="less">
@import "swiper/swiper-bundle.min.css";

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  z-index: 59;
  height: 183px;
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);

  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
  z-index: 99;
  
}
.swiper-pagination-bullet-active{
  background-color:#ec4141;
}

.swiper-pagination-bullet{
  width: 6px;
  height: 6px;
}
</style>